<template>
  <div class="TableGrid">
    <el-table
      :header-cell-style="{ background: '#0255B0',color: '#FFFFFF' }"
      border
      header-row-class-name="table-list-header"
      row-class-name="table-list-row"
      :max-height="tableData.maxHeight"
      :data="tableData.data"
      @selection-change="handleSelectionChange"
    >
      <!-- 遍历 columns -->
      <template v-for="(item, index) in tableData.columns">
        <!-- 选择框 -->
        <el-table-column
          v-if="item.selection"
          :key="index"
          type="selection"
          width="50"
          fixed="left"
          align="center"
        />
        <!-- 序号 -->
        <el-table-column
          align="center"
          v-else-if="item.index"
          :key="index"
          type="index"
          width="50"
          fixed="left"
          label="序号"
          :index="item.indexMethod"
        />
        <!-- 自定义内容 -->
        <slot
          v-else-if="item.slot"
          show-overflow-tooltip
          :name="item.slot"
          :fixed="item.fixed"
          :height="item.height"
        />
        <!-- 常规字段 -->
        <el-table-column
          v-else
          align="center"
          :key="index"
          show-overflow-tooltip
          v-bind="item"
          :min-width="item.minWidth"
          :formatter="item.formatter ? (row, column) => formatter(row, column, item) : null"
        />
      </template>
      <template slot="empty" v-if="tableData.data.length == 0">
        <img width="100%" src="../../assets/images/no_data_four.png" alt >
      </template>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-if="!IfPagination"
      background
      style="margin-top: 20px; text-align: right"
      :current-page="pagination.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleNumChange"
    />
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    tableData: {
      type: Object,
      default() {
        return {
          columns: {
            type: Array
          },
          data: {
            type: Array
          },
          total: {
            type: Number
          }
        }
      }
    },
    IfPagination: {}
  },
  data() {
    return {
      pagination: {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  mounted() {
    // console.log(this.tableData)
  },
  methods: {
    // 表格选择
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    // 分页选择
    handleNumChange(val) {
      this.pagination.pageNum = val
      this.$emit('handleNumChange', this.pagination)
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.$emit('handleSizeChange', this.pagination)
    },
    // 动态解析数据
    formatter(row, column, item) {
      // console.log(row, column, item)
      let status = ''
      item.data.forEach(v => {
        if (row[column.property] == v.id) {
          status = v.value
        }
      })
      return status
    }
  }
}
</script>
<style scoped>
.TableGrid {
  width: 100%;
}
</style>

